<template>
	<div id="onepage">
		<LMap @mapLoaded="mapLoaded"></LMap>
		<carList ref="carList"></carList>
		<div class="chart-bar" :class="{hide:!showChart}">
			<chartGudingchnagsuo class="chart"></chartGudingchnagsuo>
			<chartQiaoliang class="chart"></chartQiaoliang>
			<chartTask class="task"></chartTask>
		</div>
		<span class="el-icon-pie-chart" title="统计图" :class="{active:showChart}" @click="showChart=!showChart"></span>
	</div>
</template>
<script>
	import LMap from "../../components/map/LMap"
	import carList from "./car-list"
	import chartGudingchnagsuo from "./chart-gudingchangsuo"
	import chartQiaoliang from "./chart-qiaoliang"
	import chartTask from "./chart-task"
	export default{
		components: {
			LMap,carList,chartGudingchnagsuo,chartQiaoliang,chartTask
		},
		data(){
			return{
				showChart:true,
				
			}
		},
		watch:{
			showChart(vv){
				var tool1=document.querySelector(".leaflet-bottom.leaflet-right")
				//var tool2=document.querySelector("el-icon-pie-chart")
				if(!vv){
					tool1.style.right="0px"
					//tool2.style.right="102px"
				}else{
					tool1.style.right="410px"
					//tool2.style.right="506px"
				}
			}
		},
		methods:{
			mapLoaded(){
				this.$refs.carList.init();
			}
		}
	}
</script>
<style scoped="scoped" lang="scss">
#onepage{
	height: 100%;
	position: relative;
}	
/deep/ #car-list{
	position: absolute;
	top:10px;
	bottom: 10px;
	overflow: hidden;
	left:10px;
	background-color: #fff;
	z-index: 888;
	
}
.chart-bar{
	position: absolute;
	bottom: 0px;
	right:0px;
	z-index: 1111;
	display: flex;
	flex-direction: column;
	width:400px;
	top:10px;
	right:10px;
	bottom:10px;
	transition: all 0.3s;
	.chart{
		margin-bottom: 10px;
		&:last-child{
			margin-bottom: 0px;
		}
	}
	&.hide{
		right:-400px;
	}
}

/deep/ .leaflet-bottom.leaflet-right{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	bottom:0px;
	right:410px;
	z-index: 2222;
	a{
		width:36px;
	}
}
.el-icon-pie-chart{
	position: absolute;
	right: 10px;
	bottom: 119px;
	z-index: 1111;
	font-size: 26px;
	background-color: #fff;
	padding: 5px;
	border-radius: 5px;
	cursor: pointer;
	z-index: 1111;
	&.active{
		right:421px;
		color: #0cb4fa;
	}
}
</style>
<style lang="scss">
.home-datepicker.el-picker-panel{
    background-color:rgba(1, 24, 63, 0.93);
    .el-month-table td .cell,
    .el-year-table td .cell{
        color:#fff;
        &:hover{
            color:#409eff;
        }
    }
    .el-month-table td.today .cell,
    .el-year-table td.current:not(.disabled) .cell{
        color: #409eff;
    }
    .el-date-picker__header-label{
        color:#fff;
    }
	.el-picker-panel__icon-btn{
		color:#fff;
	}
	*{
		background-color: transparent !important;
	}
	.el-input__inner{
		color: #fff;
	}

}
</style>
